<script>
import {defineAsyncComponent} from "vue";
import Node from "@/views/wflow/design/process/node/base/Node.vue";

export default {
  name: 'ProcessTree',
  components: {
    Node,
    Root: defineAsyncComponent(() => import('./RootNode.vue')),
    Approval: defineAsyncComponent(() => import('./ApprovalNode.vue')),
    Task: defineAsyncComponent(() => import('./TaskNode.vue')),
    Exclusive: defineAsyncComponent(() => import('./ExclusiveNode.vue'))
  },
  props: {
    branch: {
      required: true,
      type: Array,
      default: () => {
        return []
      }
    }
  }
}
</script>

<template>
  <div class="w-p-gateway">
    <div class="w-p-branch">
      <a-button type="outline" class="w-p-gateway-add" shape="round" style="background: white">添加分支</a-button>
      <!--分支遍历-->
      <div v-for="(nodes, i) in branch" :key="i + '_br'"
           :class="{'w-p-branch-item': true, 'w-p-branch-item-l': i === 0, 'w-p-branch-item-r': i === branch.length - 1}">
        <div>
          <template v-for="(node, bi) in nodes" :key="bi + '_bi'">
            <!--分支里面继续遍历-->
            <component v-model="node.name" :branch="node.branch" :is="node.type.toLowerCase()"/>
          </template>
        </div>
      </div>
    </div>
    <node :show-body="false"/>
  </div>
</template>

<style scoped lang="less">
.w-p-gateway {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  .w-p-gateway-add {
    z-index: 2;
    top: -16px;
    position: absolute;
  }
}

.w-p-branch {
  display: flex;
  position: relative;
  justify-content: center;
  //再画一个横线连接所有支路
  &:before {
    content: '';
    width: calc(100% - @node-width);
    background: @node-line-color;
    position: absolute;
    height: 2px;
  }

  &:after {
    content: '';
    width: calc(100% - @node-width);
    background: @node-line-color;
    position: absolute;
    height: 2px;
    bottom: 0;
  }

  .w-p-branch-item {
    position: relative;
    margin: 0 60px;
    display: flex;
    justify-content: center;

    & > div {
      z-index: 1; //防止连线跑到它上面
      margin-top: 40px;
      &>.w-p-node:last-child {
        :deep(.w-p-node-add) {
          //分支最后一个节点要去除箭头，影响美观
          &:after {
            display: none !important;
          }
        }
      }
    }

    &:before {
      content: '';
      position: absolute;
      background: @node-line-color;
      height: 100%;
      width: 2px;
    }
  }

  .w-p-branch-item-l {
    margin-left: 0;
  }

  .w-p-branch-item-r {
    margin-right: 0;
  }
}
</style>
